<template>
  <div>
    <el-card style="height: 100vh;">
      <!-- 商家信息,提交资料 -->
      <h3>企业信息</h3>
      <div style="width: 30%;margin-left: 30px;">
        <div class="iptClass">
          <el-input v-model="enterprise_info.contact_person" class="ipt" disabled placeholder="请输入联系人姓名">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              联系人
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="enterprise_info.contact" class="ipt" disabled placeholder="请输入联系人手机">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              联系手机
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="enterprise_info.company_name" class="ipt" disabled placeholder="请输入企业名称">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              企业名称
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="enterprise_info.legal_person" class="ipt" disabled placeholder="请输入法人姓名">
            <span slot="prepend">
              <!-- <i class="el-icon-office-building" /> -->
              法人姓名
            </span>
          </el-input>
        </div>
        <div class="iptClass">
          <el-input v-model="enterprise_info.Unified_social_credit_code" disabled class="ipt" placeholder="请输入统一社会信用代码">
            <span slot="prepend">
              <!-- <i class="el-icon-lollipop" /> -->
              社会信用代码
            </span>
          </el-input>
        </div>

        <div class="iptClass" style="display: flex;">
          <span class="spanClass">营业执照
            <el-tooltip placement="top">
              <div slot="content">营业执照</div>
              <i class="el-icon-info" style="font-size: 18px;color: #c0c4cc;"></i>
            </el-tooltip>
          </span>
          <span>
            <img v-if="enterprise_info.business_license_img_url" @click="showCardDialog(enterprise_info.business_license_img_url)" :src="enterprise_info.business_license_img_url" class="avatar">
            <div v-else>
              <div style="width: 100px;height: 40px;line-height: 40px;margin: 100%;border: 1px solid #D3D6DA;color: #BBBBBB; text-align: center;">暂无图片</div>
              <!-- <img src="../../assets/dan.jpg" class="avatar" @mouseover="msg=true" @mouseleave="msg=false"> -->

            <!--  <div v-show="msg" class="tips">这是默认图片</div> -->
            </div>

          </span>
        </div>
      </div>
    </el-card>
    <!-- 图片放大观看 -->
    <el-dialog
      title="图片预览"
      :visible.sync="showimg"
      width="35%"
      center>
      <div style="text-align: center;">
        <img width="100%" :src="imageUrl" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showimg = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        imageUrl: "",
        formdata: [],
        enterprise_info:[],
        msg: "",
        showimg:false
      }
    },
    mounted() {
      this.getMerchantUserInfo()
    },
    methods: {
      //放大图片
      showCardDialog(img_url){
        console.log(img_url)
        this.imageUrl = img_url
        this.showimg = true
      },
      //获取审核状态
      getMerchantUserInfo() {
        this.$api.getMerchantUserInfo().then(res => {
          if(res.data.level=="success"){
            this.formdata = res.data.data
            this.enterprise_info =  res.data.data.enterprise_info
          }else {
            this.$message.error(res.data.message)
          }
          console.log(this.formdata)
        })
      },
    }
  }
</script>

<style scoped="scoped">

  .iptClass {
    margin-bottom: 2%;
    margin-top: 2%;
    border: 1px solid #ffffff1a;
  }

  .spanClass {
    background-color: #F5F7FA;
    color: #909399;
    vertical-align: middle;
    display: table-cell;
    position: relative;
    border: 1px solid #DCDFE6;
    border-radius: 4px;
    width: 1px;
    padding: 20px 70px 0px 52px;
    line-height: 38px;
  }

  /deep/.el-input-group__prepend {
    width: 125px;
    height: 50px;
    text-align: center;
  }

  /deep/.el-input__inner {
    height: 50px;
  }

  .avatar {
    width: 160px;
    height: 160px;
    margin: 40px;
    border: 1px solid #acaaaadd;
    position: relative;
  }

  .tips {
    width: 120px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 1px solid #575757;
    color: #575757;
    position: absolute;
    margin-top: -40px;
    left: 235px
  }
</style>
